<template>
  <div class="login-container">
    <div>
      <!-- 配置from表单验证：
1:必须给el-from 组件绑定model 为表单数据对象
2：给需要验证的表单项el-form-item绑定Prop属性 
注意：prpo属性需要指定表单对象的数据名称
3：el-from 组件的rules 属性配置验证规则
手动触发表单验证
1：给el-from设置ref 起个名字（随便起不要重复即可）
2：通过ref 获el-from组件，调用组件的validate 进行验证
 -->
      <el-form
        ref="login-form"
        :model="user"
        :rules="formRules"
        class="login-form"
      >
        <el-form-item prop="mobile">
          <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
        </el-form-item>
        <el-form-item prop="agree">
          <el-checkbox v-model="user.agree" 
            >我已阅读并同意用户协议和隐私条款</el-checkbox
          >
        </el-form-item>
        <el-form-item>
          <el-button
            v-model="checkbox"
            class="login-but"
            type="primary"
            @click="onLogin"
            :loading="loginLoading"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {login} from '@/api/user'
export default {
  name: "LoginIdex",
  components: {},
  props: {},
  data() {
    return {
      user: {
        mobile: "", //手机号
        code: "", //验证码
        agree: false, //是否同意协议
      },
      // checkbox:false, //是否同意协议的选中状态
      loginLoading: false, //登录的loading状态
      formRules: {
        //表单验证规则配置
        //要验证的数据名称:规则列表
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "change" }, //失去焦点的时候
          { pattern: /^1[3-8]\d{9}$/, message: "请输入正确的手机格式" },
        ],
        code: [
          { required: true, message: "验证码不能为空", trigger: "change" }, //失去焦点的时候
          { pattern: /^\d{6}$/, message: "请输入正确的验证码格式" },
        ],
        agree: [
          //自定义校严规则
          //如果验证通过callback
          //如果验证通过callback(new error("错误消息"))
          {
            validator: (rule, value, callback) => {
              console.log(rule);
              if (value) {
                callback();
              } else {
                callback(new Error("请同意用户协议"));
              }
            },
            // message: "验证码不能为空",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onLogin() {
      //获取表单数据(根据接口要求绑定数据)
      // const user=this.user
      //表单验证
      //validate方法是异步的
      this.$refs["login-form"].validate((valid, err) => {
        console.log(valid, err);
        //如果表单验证失败，停止请求提交
        if (!valid) {
          return;
        }
        //表单通过，请求登录
        this.login();
      });
      
    },
    login() {
      //开始登录中 Loading...
      this.loginLoading = true;
      //对于代码中的请求操作
      //1接口请求可能需要重用
      //实际工作中，接口非常容易变动，改起来麻烦
      //我们建议的做法是把所有的请求都封装城函数然后统一的组织到模块中进行统一管理
      //这样做的好处就是管理维护更方便，也好重用。
   
        login(this.user).then((res) => {
          console.log(res);
          //登录成功
          //消息提示
          this.$message({
            message: "登录成功",
            type: "success",
          });
          //关闭Loading
          this.loginLoading = false;
          //将接口返回的用户相关数据放到本地储存，方便应用数据
          //本地存储只能存储字符串
          //如果需要存储对象，数组类型的数据，则把他们转为JSON
          //第一个参数是起的名字，第二个是存储的对象[object object]需要转为json对象转换一下JSON.stringify
          window.localStorage.setItem("user",JSON.stringify(res.data.data))
        })
        .catch((err) => {
          console.log("登录失败", err);
          //登录失败
          //消息提示
          this.$message.error("登录失败,手机号验证码错误");
          //关闭Loading
          //  window.localStorage.setItem("user",1234)
          // this.$router.push("/");
          this.loginLoading = true;
          setTimeout(()=>{
this.loginLoading=false
          },1000)
            
          
        });
    },
  },
};
</script>
<style lang="less" scoped>
.login-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("./login_bg.jpg") no-repeat;
  background-size: cover;
  .login-form {
    background-color: #fff;
    padding: 50px;
    min-width: 300px;
    .login-but {
      width: 100%;
    }
  }
}
</style>